<link rel="stylesheet" href="<%= basePath%>/lib/sui.min.css">
<link rel="stylesheet" href="<%= basePath%>/lib/sui-append.min.css">
<link rel="stylesheet" href="<%= basePath%>/public/iconfont/iconfont.css">
<link rel="stylesheet" href="<%= basePath%>/public/css/style.css">
<link rel="stylesheet" href="<%= basePath%>/public/css/reset.css">
<link rel="stylesheet" href="<%= basePath%>/modules/leader/css/style.css">

<script type="application/javascript" src="<%= basePath%>/lib/jquery.min.js"></script>
<script type="application/javascript" src="<%= basePath%>/lib/sui.min.js"></script>
<script type="application/javascript" src="<%= basePath%>/lib/underscore-min.js"></script>
<script type="application/javascript" src="<%= basePath%>/public/js/util.js"></script>
<script type="application/javascript" src="<%= basePath%>/public/js/ui.js"></script>

<script type="application/javascript" src="<%= basePath%>/modules/leader/js/leader.js"></script>
<script type="application/javascript" src="<%= basePath%>/modules/leader/js/query.js"></script>

<%
var RawAttendanceDescriptions = new Map();
RawAttendanceDescriptions.set(0, '进校门');
RawAttendanceDescriptions.set(1, '出校门');
%>

<div class="body_scroll">
    <div class="frame-content">
        <ul class="info_list">
            <li class="li_header">
                设备：
                <span class="sui-dropdown dropdown-bordered select select-device" style="font-weight: 500">
                    <span class="dropdown-inner">
                                <a role="button" data-toggle="dropdown" class="dropdown-toggle">
                                    <input type="hidden" class="select-device" value="0"><i class="caret"></i>
                                    <span>全部</span>
                                </a>
                                <ul role="menu" aria-labelledby="status_top" class="sui-dropdown-menu menu-devices">
                                    <li role="presentation" class="active"><a role="menuitem" tabindex="-1" value="0">全部</a></li>
                                    <%leader.managedSchool.devices.forEach(function(device) {%>
                                    <li role="presentation"><a role="menuitem" tabindex="-1" value="<%=device.id%>"><%=device.name%></a></li>
                                    <%})%>
                                </ul>
                            </span>
                        </span>
            </li>
            <li class="li_info">
                <span class="iconfont" style="color: #5396f1; float: left">&#xe61f;</span>
                <a class="btn-search-raw-attendances sui-btn btn-primary table_header search_button" style="float:none;margin-left:10px;">查询</a>
                <form class="sui-form form-horizontal" style="float: left; margin: 0">
                    <div class="control-group" style="margin: 0">
                        <span style="font-size: 14px">日期：</span>
                        <div class="input-control control-right">
                            <input type="text" data-toggle="datepicker" data-date-timepicker="true" class="input-start-time date_input_top">
                            <i class="sui-icon iconfont table_header_date_icon">&#xe605;</i>
                        </div>
                        <span style="font-size: 14px"> 至：</span>
                        <div class="input-control control-right">
                            <input type="text" data-toggle="datepicker" data-date-timepicker="true" class="input-end-time date_input_top">
                            <i class="sui-icon iconfont table_header_date_icon">&#xe605;</i>
                        </div>
                        <span style="font-size: 14px">&nbsp;&nbsp;&nbsp;&nbsp;进出查询：</span>
                                <span class="sui-dropdown dropdown-bordered table_header select">
                                    <span class="dropdown-inner">
                                        <a role="button" data-toggle="dropdown" class="dropdown-toggle">
                                            <input type="hidden" value="-1" class="select-type" id="search_status_input"><i class="caret"></i>
                                            <span>全部</span>
                                        </a>
                                        <ul role="menu" aria-labelledby="status_drop" class="sui-dropdown-menu menu-types">
                                            <li role="presentation" class="active"><a role="menuitem" tabindex="-1" value="-1" onclick="connectionGradeClicked(event)">全部</a></li>
                                            <li role="presentation"><a role="menuitem" tabindex="-1" value="0" onclick="connectionGradeClicked(event)">进校门</a></li>
                                            <li role="presentation"><a role="menuitem" tabindex="-1" value="1" onclick="connectionGradeClicked(event)">出校门</a></li>
                                        </ul>
                                    </span>
                                </span>
                        <div style="margin-top: 10px">
                            <span style="font-size: 14px">班级：</span>
                        <span class="sui-dropdown dropdown-bordered table_header select">
                            <span class="dropdown-inner">
                                    <a role="button" data-toggle="dropdown" class="dropdown-toggle" id="status_select">
                                        <input type="hidden" value="0" class="select-class" id="teacher_search_status"><i class="caret"></i><span>全部</span>
                                    </a>
                                    <ul role="menu" aria-labelledby="status_drop" class="sui-dropdown-menu menu-classes">
                                        <li role="presentation"><a role="menuitem" tabindex="-1" value="0">全部</a></li>
                                        <% grades.forEach(function(grade) {
                                                grade.natureClasses.forEach(function(natureClass) {
                                        %>
                                        <li role="presentation">
                                            <a role="menuitem" data-show="class_all" data-grade="<%=grade.id%>" tabindex="-1" value="<%=natureClass.id%>"><%=natureClass.name%></a>
                                        </li>
                                        <%
                                        });
                                        });
                                        %>
                                    </ul>
                                    </span>
                        </span>
                        </div>
                            </div>
                        </form>
                        <div style="clear:both;"></div>
                    </li>
            <li class="li_footer">
                        <table class="sui-table table-zebra attend_table leader_table_body table-bordered">
                            <thead>
                            <tr>
                                <th>序号</th>
                                <th>卡片ID</th>
                                <th>姓名</th>
                                <th>学号</th>
                                <th>进/出</th>
                                <th>时间</th>
                            </tr>
                            </thead>
                            <tbody>
                                <% rawAttendances.forEach(function(rawAttendance, index) { %>
                                <tr>
                                    <td><%=index + 1%></td>
                                    <td><%=rawAttendance.card.serialId%></td>
                                    <td><%=rawAttendance.student.name%></td>
                                    <td><%=rawAttendance.student.sid%></td>
                                    <td><%=RawAttendanceDescriptions.get(rawAttendance.type)%></td>
                                    <td>
                                        <%=lib.util.formatDate(rawAttendance.time)%>
                                        <%=lib.util.formatTime(rawAttendance.time)%>
                                    </td>
                                </tr>
                                <% }); %>
                            </tbody>
                        </table>
                    </li>
        </ul>
    </div>
</div>